<template>
    <div class="content">
        <img class="success" src="@/static/images/common/success.png" />
        <p class="status">预定成功！</p>
        <p class="desc">您可以在我的订单查看已预定订单详情</p>
        <div class="btn-group">
            <u-button
                color="#5428EC"
                text="查看订单"
                :customStyle="{ width: '100%' }"
                @click="toSeat"
            ></u-button>
            <u-button
                color="#5428EC"
                plain
                text="返回首页"
                :customStyle="{ width: '100%', marginTop: '20rpx' }"
                @click="backHome"
            ></u-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'success',
    data() {
        return {
            id: null,
        };
    },
    onLoad(options) {
        this.id = Number(options.orderId);
    },
    methods: {
        toSeat() {
            uni.reLaunch({
                url: '/pages/my/seat-detail?id=' + this.id + '&type=success',
            });
        },
        backHome() {
            uni.switchTab({
                url: '/pages/home/index',
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    background: #fff;
    padding: 100rpx 30rpx;
    @include flexBox(flex-start, center, column);
    .success {
        width: 270rpx;
        height: 212rpx;
    }
    .status {
        font-size: 32rpx;
        font-weight: 600;
        color: #2f2f2f;
        margin-top: 20rpx;
    }
    .desc {
        font-size: 24rpx;
        color: #979797;
        margin-top: 18rpx;
    }
    .btn-group {
        width: 100%;
        margin-top: 76rpx;
    }
}
</style>
